<template>
	<view class="">
		<view class="clear top_btn top_btn_daikuan">
			<view class="left" style="width: 20%;" v-for="(item,index) in type" :key="index"  @tap="changeindex(index,item.finish)">
				<view class="top_btn_text" :class="{'type-active':index==current}">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="list-container">
			<!-- 全部 -->
			<view class="shenhe-list" @tap="goinfo" v-for="(item,index) in list1" :data-id="item.id" v-if="finish==99">
				<view class="clear shenhe-text" >
					<text class="left black_font"> ￥{{item.capital}}</text>
				</view>
				<view class="clear shenhe-text">
					<text class="left">{{item.addtime}}</text>
				</view>
				<view class="clear lilv-info" v-if='finish==2'>
					已还{{item.paymoney}}元 / 利息{{item.investment}}元 / 利率{{item.app_rate}}%
				</view>
				<!-- 饼状图 -->
				<view style="position: absolute; top: 8px;right:70rpx;width: 100rpx;" >
					<!-- <view class="third">
					   <view class="second"></view>
					   <view class="first"></view>
					</view> -->
					<cmd-circle :circleColor="color"  :circleWidth="3" :percent="item.percent" v-if="item.is_finish != -1"></cmd-circle>
					<cmd-circle :circleColor="redcolor" :circleWidth="3" :percent="item.percent" v-if="item.is_finish ==-1"></cmd-circle>
					<!-- <cmd-circle type="circle" :cid="item.cid" :percent="item.percent" :show-info="show_info" :stroke-width="4" :stroke-color="color" v-if="item.is_finish != -1" :width="65"></cmd-circle> 
				    <cmd-circle type="circle" :cid="item.cid" :percent="item.percent" :show-info="show_info" :stroke-width="4" :stroke-color="redcolor" v-if="item.is_finish == -1" :width="65"></cmd-circle> -->
				</view>
				<view style="color: #ff5a5a;position:absolute; top:25px;right: 11%;font-size: 28rpx;" v-if="item.is_finish == -1">逾期</view>
				<view style="color: #ff5a5a;position:absolute; top:43px;right: 6.5%;font-size: 26rpx;width: 110rpx;text-align: center;" v-if="item.is_finish == -1">{{item.percent}}%</view>
				<view style="color: #b8b8b8;position:absolute; top:25px;right: 11%;font-size: 28rpx;" v-if="item.is_finish!=1&&item.is_finish!=-1">已还</view>
				<view style="color: #1e99ff;position:absolute; top:43px;right:6.5%;font-size: 26rpx;width: 110rpx;text-align: center;" v-if="item.is_finish!=1&&item.is_finish!=-1">{{item.percent}}%</view>
				<view style="color: #b8b8b8;position:absolute; top:34px;right: 8.5%;font-size: 28rpx;" v-if="item.is_finish==1">已结清</view>
				<image src="../../static/img/to.png" class="go_icon" style="position: absolute; top: 33px;right: -5px;"></image>
			</view>
			<!-- 待还款 -->
			<view class="shenhe-list" @tap="goinfo" v-for="(item,index) in list2" :data-id="item.id" v-if="finish==0">
				<view class="clear shenhe-text" >
					<text class="left black_font"> ￥{{item.capital}}</text>
				</view>
				<view class="clear shenhe-text">
					<text class="left">{{item.addtime}}</text>
				</view>
				<view class="clear lilv-info" v-if='finish==2'>
					已还{{item.paymoney}}元 / 利息{{item.investment}}元 / 利率{{item.app_rate}}%
				</view>
				<!-- 饼状图 -->
				<button type="button" class="anniu" @tap.stop="tixing(item.id)" v-if="user.top==3&&item.is_finish==-1">逾期提醒</button>			
				<view style="position: absolute; top: 8px;right:70rpx;width: 100rpx;" >	
					<cmd-circle :circleColor="color"  :circleWidth="3" :percent="item.percent" v-if="item.is_finish != -1"></cmd-circle>
				</view>
				<view style="color: #b8b8b8;position:absolute; top:25px;right: 11%;font-size: 28rpx;" v-if="item.is_finish!=1">已还</view>
				<view style="color: #1e99ff;position:absolute; top:43px;right:6.5%;font-size: 26rpx;width: 110rpx;text-align: center;" v-if="item.is_finish!=1">{{item.percent}}%</view>
				<view style="color: #b8b8b8;position:absolute; top:34px;right: 8.5%;font-size: 28rpx;" v-if="item.is_finish==1">已结清</view>
				<image src="../../static/img/to.png" class="go_icon" style="position: absolute; top: 33px;right: -5px;"></image>
			</view>
			<!-- 还款中的 -->
			<view class="shenhe-list" @tap="goinfo" v-for="(item,index) in list3"  :data-id="item.id" v-if="finish==2">
				<view class="clear shenhe-text" >
					<text class="left black_font"> ￥{{item.capital}}</text>
				</view>
				<view class="clear shenhe-text">
					<text class="left">{{item.addtime}}</text>
				</view>
				<view class="clear lilv-info" v-if='finish==2'>
					已还{{item.paymoney}}元 / 利息{{item.investment}}元 / 利率{{item.app_rate}}%
				</view>
				<!-- 饼状图 -->
				<button type="button" class="anniu" @tap.stop="tixing(item.id)" v-if="user.top==3&&item.is_finish==-1">逾期提醒</button>			
				<view style="position: absolute; top: 8px;right:70rpx;width: 100rpx;" >	
                <cmd-circle :circleColor="color"  :circleWidth="3" :percent="item.percent" v-if="item.is_finish != -1"></cmd-circle>
				</view>
				
				<view style="color: #b8b8b8;position:absolute; top:25px;right: 11%;font-size: 28rpx;" v-if="item.is_finish!=1">已还</view>
				<view style="color: #1e99ff;position:absolute; top:43px;right:6.5%;font-size: 26rpx;width: 110rpx;text-align: center;" v-if="item.is_finish!=1">{{item.percent}}%</view>
				<view style="color: #b8b8b8;position:absolute; top:34px;right: 8.5%;font-size: 28rpx;" v-if="item.is_finish==1">已结清</view>
				<image src="../../static/img/to.png" class="go_icon" style="position: absolute; top: 33px;right: -5px;"></image>
			</view>	
			
			
			<!-- 已结清 -->
			<view class="shenhe-list" @tap="goinfo" v-for="(item,index) in list4" :data-id="item.id" v-if="finish==1">
				<view class="clear shenhe-text" >
					<text class="left black_font"> ￥{{item.capital}}</text>
				</view>
				<view class="clear shenhe-text">
					<text class="left">{{item.addtime}}</text>
				</view>
				<view class="clear lilv-info" v-if='finish==2'>
					已还{{item.paymoney}}元 / 利息{{item.investment}}元 / 利率{{item.app_rate}}%
				</view>
				<!-- 饼状图 -->
				<view style="position: absolute; top: 8px;right:70rpx;width: 100rpx;" >	
					<cmd-circle :circleColor="color"  :circleWidth="3" :percent="item.percent" v-if="item.is_finish != -1"></cmd-circle>
				</view>
				<view style="color: #b8b8b8;position:absolute; top:25px;right: 11%;font-size: 28rpx;" v-if="item.is_finish!=1">已还</view>
				<view style="color: #1e99ff;position:absolute; top:43px;right:6.5%;font-size: 26rpx;width: 110rpx;text-align: center;" v-if="item.is_finish!=1">{{item.percent}}%</view>
				<view style="color: #b8b8b8;position:absolute; top:34px;right: 8.5%;font-size: 28rpx;" v-if="item.is_finish==1">已结清</view>
				<image src="../../static/img/to.png" class="go_icon" style="position: absolute; top: 33px;right: -5px;"></image>
			</view>
			
			<!-- 逾期 -->
			<view class="shenhe-list" @tap="goinfo" v-for="(item,index) in yuqulist" :data-id="item.id" v-if="finish==-1">
				<view class="clear shenhe-text" >
					<text class="left black_font"> ￥{{item.capital}}</text>
				</view>
				<view class="clear shenhe-text">
					<text class="left">{{item.addtime}}</text>
				</view>
				<view class="clear lilv-info" v-if='finish==2'>
					已还{{item.paymoney}}元 / 利息{{item.investment}}元 / 利率{{item.app_rate}}%
				</view>
				<!-- 饼状图 -->
				<button type="button" class="anniu" @tap.stop="tixing(item.id)" v-if="user.top==3&&item.is_finish==-1">逾期提醒</button>			
				<view style="position: absolute; top: 8px;right:70rpx;width: 100rpx;" >	
					<cmd-circle :circleColor="redcolor"  :circleWidth="3" :percent="item.percent" ></cmd-circle>
				</view>
				<view style="color: #ff5a5a;position:absolute; top:25px;right: 11%;font-size: 28rpx;">逾期</view>
				<view style="color: #ff5a5a;position:absolute; top:43px;right: 6.5%;font-size: 26rpx;width: 110rpx;text-align: center;" >{{item.percent}}%</view>
				<image src="../../static/img/to.png" class="go_icon" style="position: absolute; top: 33px;right: -5px;"></image>
			</view>
			<image src="../../static/img/nodata.png" class="no-data" v-if="ishas1"  mode="widthFix"></image>
		</view>	
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
	import {getlogin} from '@/static/js/login.js';
	import {fmoney} from '@/static/js/login.js';
	import {timestampToDate} from '@/static/js/login.js';
	// import CmdCircle from "@/components/cmd-circle.vue";
	// import CmdCircle from "@/components/chocolate-progress-bar.vue";
	import CmdCircle from "@/components/Your_Exios-Circle.vue";
	// import CmdProgress from "@/components/cmd-progress.vue";
	import MescrollUni from "@/components/mescroll-uni/uni-load-more.vue";
	var  _self,
	page = 1;
	export default {
		components: {
		    MescrollUni,CmdCircle
		},
		data() {
			return {
				current:0,
				type:[
					{name:"全部",finish:99},
					{name:"待还款",finish:0},
					{name:"还款中",finish:2},
					{name:"已结清",finish:1},
					{name:"已逾期",finish:-1},
					],
				user:{},
				color:"#1e99ff",
				redcolor:"#ff5a5a",
				show_info:false,
				finish:99,
				kehu_id:"",
				type_user:"",
				user_id:"",
				loadingType: 0,
				list1:[],
				list2:[],
				list3:[],
				list4:[],
				yuqulist:[],
				ishas1:false,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onPullDownRefresh() {
			page=1
			_self.loadingType=0;
		    this.fnGetData();   
		    setTimeout(function () {
		            uni.stopPullDownRefresh();
		        }, 1000);
		},
		onReachBottom: function() {
			if (_self.loadingType != 0) {//loadingType!=0;直接返回
				return false;
			}
			_self.loadingType = 1;
			uni.showNavigationBarLoading();//显示加载动画
			page++;//每触底一次 page +1
			if(this.kehu_id){
				this.user.member_id=this.kehu_id;
			}
			uni.request({
				url: httpPath.filePath+"/api.php/index/member/capital_list",
				method:'POST',
				header:{'content-type':'application/x-www-form-urlencoded'},
				data: {member_id:this.user.member_id,page:page,finish:this.finish},
				success: (res) => {
					if (res.data.result.length==0) {//没有数据
						_self.loadingType = 2;
						uni.hideNavigationBarLoading();//关闭加载动画
						return false;
					}
					if(this.finish==-1){
						for (let i = 0;i < res.data.result.length;i++) {
							res.data.result[i].addtime=timestampToDate(res.data.result[i].addtime)
							res.data.result[i].capital=fmoney(res.data.result[i].capital)
							res.data.result[i].percent=parseFloat(res.data.result[i].paymoney)/parseFloat(res.data.result[i].capital)*100;
							res.data.result[i].percent = Math.round(res.data.result[i].percent*100)/100;
							res.data.result[i].cid = "cidyu"+res.data.result[i].id;
							_self.yuqulist.push(res.data.result[i]);
							
						}
					}else if(this.finish==99){
						for (let i = 0;i < res.data.result.length;i++) {
							res.data.result[i].addtime=timestampToDate(res.data.result[i].addtime)
							res.data.result[i].capital=fmoney(res.data.result[i].capital)
							res.data.result[i].percent=parseFloat(res.data.result[i].paymoney)/parseFloat(res.data.result[i].capital)*100;
							res.data.result[i].percent = Math.round(res.data.result[i].percent*100)/100;
							res.data.result[i].cid = "cidquanbu"+res.data.result[i].id;
							_self.list1.push(res.data.result[i]);
							
						}
					}else if(this.finish==0){
						for (let i = 0;i < res.data.result.length;i++) {
							res.data.result[i].addtime=timestampToDate(res.data.result[i].addtime)
							res.data.result[i].capital=fmoney(res.data.result[i].capital)
							res.data.result[i].percent=parseFloat(res.data.result[i].paymoney)/parseFloat(res.data.result[i].capital)*100;
							res.data.result[i].percent = Math.round(res.data.result[i].percent*100)/100;
							res.data.result[i].cid = "cidwei"+res.data.result[i].id;
							_self.list2.push(res.data.result[i]);
							
						}
					}else if(this.finish==2){
						for (let i = 0;i < res.data.result.length;i++) {
							res.data.result[i].addtime=timestampToDate(res.data.result[i].addtime)
							res.data.result[i].capital=fmoney(res.data.result[i].capital)
							res.data.result[i].percent=parseFloat(res.data.result[i].paymoney)/parseFloat(res.data.result[i].capital)*100;
							res.data.result[i].percent = Math.round(res.data.result[i].percent*100)/100;
							res.data.result[i].cid = "cidzhong"+res.data.result[i].id;
							_self.list3.push(res.data.result[i]);
							
						}
					}else if(this.finish==4){
						for (let i = 0;i < res.data.result.length;i++) {
							res.data.result[i].addtime=timestampToDate(res.data.result[i].addtime)
							res.data.result[i].capital=fmoney(res.data.result[i].capital)
							res.data.result[i].percent=100;
							// res.data.result[i].percent = Math.round(res.data.result[i].percent*100)/100;
							res.data.result[i].cid = "cidfinish"+res.data.result[i].id;
							_self.list4.push(res.data.result[i]);
							
						}
					}
					
					_self.loadingType = 0;//将loadingType归0重置
					uni.hideNavigationBarLoading();//关闭加载动画
				}
			});
		
		},
		onShow(){
			this.user = getlogin();
			if(!this.user.islogin){
				uni.showModal({
				   showCancel:false,
				   content:"您还没有登录，请登录"
				})
				uni.navigateTo({
					url:"../public/login"
				})
			}
			this.user_id=this.user.user_id;
			this.type_user=this.user.top;
			
			page = 1;
			_self = this;
			_self.fnGetData();
		},
		onLoad(option) {
	       this.user = getlogin();
	       if(!this.user.islogin){
	       	uni.showModal({
	       	   showCancel:false,
	       	   content:"您还没有登录，请登录"
	       	})
	       	uni.navigateTo({
	       		url:"../public/login"
	       	})
	       }
		   this.user_id=this.user.user_id;
		   this.type_user=this.user.top;
	       if(option.member_id){
			   this.user.member_id=option.member_id;
			   this.kehu_id=option.member_id;
		   }
		   page = 1;
		   _self = this;
		   _self.fnGetData();  
		},
		methods: {
			tixing(id){
				uni.request({
					url: httpPath.filePath+"/api.php/index/user/yuqi_tips",
					method:'POST',
					data: {member_id:this.user.member_id,user_id:this.user.user_id,id:id},
					header:{'content-type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == "200"){
							uni.showModal({
								showCancel:false,
								content:"提醒成功！"
							})
						}else{
							uni.showModal({
								showCancel:false,
								content:res.data.message
							})
						}
					}
				});
			},
			goinfo(e){
				if(this.kehu_id){
					uni.navigateTo({
					    url:"../myself/daikuaninfo?id="+e.currentTarget.dataset.id+"&member_id="+this.kehu_id
					})
				}else{
					uni.navigateTo({
					    url:"../myself/daikuaninfo?id="+e.currentTarget.dataset.id
					})
				}
			
			},
	       //改变审核状态
		   changeindex(index,finish){  
			   this.current=index;
			   this.finish=finish;
			   page = 1;
			   _self = this;
			   _self.loadingType=0;
			   _self.fnGetData();
			   // console.log(this.current)
			   this.list1=[];
			   this.list2=[];
			   this.list3=[];
			   this.list4=[];
			   this.yuqulist=[];
		   }
		   //点击跳转详情
		   ,fnGetData(){
			    if(this.kehu_id){
					this.user.member_id=this.kehu_id;
				}
		   		uni.request({
		   			url: httpPath.filePath+"/api.php/index/member/capital_list",
		   			method:'POST',
		   			data: {member_id:this.user.member_id,page:page,finish:this.finish},
		   			header:{'content-type':'application/x-www-form-urlencoded'},
		   			success: res => {
		   				if(res.data.code == "200"){
							if(this.finish==-1){
								console.log("逾期")
								this.yuqulist = res.data.result;
								if(this.yuqulist.length==0){
									this.ishas1=true;
								}else{
									this.ishas1=false;
									
								}
								for(let i=0;i<this.yuqulist.length;i++){
									this.yuqulist[i].capital = fmoney( this.yuqulist[i].capital)
									this.yuqulist[i].addtime = timestampToDate( this.yuqulist[i].addtime)
									this.yuqulist[i].percent = parseFloat(this.yuqulist[i].paymoney)/parseFloat(this.yuqulist[i].capital)*100;
									this.yuqulist[i].percent = Math.round(this.yuqulist[i].percent*100)/100;
									this.yuqulist[i].cid = "cidyu"+this.yuqulist[i].id;
								}
								// console.log(JSON.stringify(this.yuqulist))
							}else if(this.finish==99){
								console.log("全部")
								this.list1 = res.data.result;
								if(this.list1.length==0){
									this.ishas1=true;
								}else{
									this.ishas1=false;
								}
								for(let i=0;i<this.list1.length;i++){
									this.list1[i].capital = fmoney( this.list1[i].capital)
									this.list1[i].addtime = timestampToDate( this.list1[i].addtime)
									this.list1[i].percent = parseFloat(this.list1[i].paymoney)/parseFloat(this.list1[i].capital)*100;
									this.list1[i].percent = Math.round(this.list1[i].percent*100)/100;
									this.list1[i].cid = "cidquanbu"+this.list1[i].id;
								}
								// console.log(JSON.stringify(this.list1))
							}else if(this.finish==0){
								console.log("代还款")
								this.list2 = res.data.result;
								if(this.list2.length==0){
									this.ishas1=true;
								}else{
									this.ishas1=false;
								}
								for(let i=0;i<this.list2.length;i++){
									this.list2[i].capital = fmoney( this.list2[i].capital)
									this.list2[i].addtime = timestampToDate( this.list2[i].addtime)
									this.list2[i].percent = parseFloat(this.list2[i].paymoney)/parseFloat(this.list2[i].capital)*100;
									this.list2[i].percent = Math.round(this.list2[i].percent*100)/100;
									this.list2[i].cid = "cidwei"+this.list2[i].id;
								}
								// console.log(JSON.stringify(this.list2))
							}else if(this.finish==2){
								console.log("还款中")
								this.list3 = res.data.result;
								if(this.list3.length==0){
									this.ishas1=true;
								}else{
									this.ishas1=false;
								}
								
								for(let i=0;i<this.list3.length;i++){
									this.list3[i].capital = fmoney( this.list3[i].capital)
									this.list3[i].addtime = timestampToDate( this.list3[i].addtime)
									this.list3[i].percent = parseFloat(this.list3[i].paymoney)/parseFloat(this.list3[i].capital)*100;
									this.list3[i].percent = Math.round(this.list3[i].percent*100)/100;
									this.list3[i].cid = "cidzhong"+this.list3[i].id;
								}
								// console.log(JSON.stringify(this.list3))
							}else if(this.finish==1){
								console.log("已结清")
								this.list4 = res.data.result;
								if(this.list4.length==0){
									this.ishas1=true;
								}else{
									this.ishas1=false;
								}
								for(let i=0;i<this.list4.length;i++){
									this.list4[i].capital = fmoney( this.list4[i].capital)
									this.list4[i].addtime = timestampToDate( this.list4[i].addtime)
									this.list4[i].percent = 100;
									// this.list4[i].percent = Math.round(this.list4[i].percent*100)/100;
									this.list4[i].cid = "cidfinish"+this.list4[i].id;
								}
								// console.log(JSON.stringify(this.list4))
							}
		   					
		   				}
		   			}
		   		});
		       },
		  
		}
	}
</script>

<style>
	.shenhe-text{font-size: 28rpx;}
	page{background: #fff;}
	.top_btn_daikuan .left{width: 20%!important;}
	.lilv-info{font-size: 26rpx;color: #a1a1a1;}
	.anniu{position: absolute;top: 26px;right: 35%;width: 70px;height: 27px;background:#FFFFFF;border: 1px solid #ff5a5a;color: #ff5a5a;line-height: 26px;font-size: 28rpx;padding: 0px;}
    .anniu::after{border: none;}
	.third{
	    background: #FFFFFF;
	    width: 60px;
	    height: 60px;
	    border-radius: 50%;
	    position: relative;
		z-index: 1;
	}
	.second{
	    background: #1e99ff;
	    width: 60px;
	    height: 60px;
	    border-radius: 50%;
	    clip:rect(0,91px,auto,0);
	    position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
	}
	.first{
		
	    background: #FFFFFF;
	    width: 54px;
	    height: 54px;
	    border-radius: 50%;
		z-index:1000;
	    /* clip:rect(0,auto,auto,91px); */
		 z-index:3;
		position: absolute;
		top:3px ;
		left: 3px; 
	}
	
</style>
